<template>
  <!-- 金融产品清单 -->
  <div class="layout" v-loading="loading">
    <div class="financeProduct">
      <div style="display: flex; justify-content: center">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
      </div>
      <div class="productBox">
        <div class="item">
          <div class="title">贷款类型：</div>
          <div class="optionTitleDiv">
            <div class="allOptionDiv">
              <div
                @click="selectType(1, -1)"
                :class="
                  typeIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'
                "
              >
                全部
              </div>
            </div>
            <div class="orderOptionDiv">
              <div
                @click="selectType(1, type.dictValue)"
                :class="
                  typeIndex == type.dictValue
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
                v-for="(type, index) in typeList"
                :key="index"
              >
                {{ type.dictLabel }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">贷款银行：</div>
          <div class="optionTitleDiv">
            <div class="allOptionDiv">
              <div
                @click="selectType(2, -1)"
                :class="
                  bankIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'
                "
              >
                全部
              </div>
            </div>
            <div class="orderOptionDiv">
              <div
                @click="selectType(2, type.dictValue)"
                :class="
                  bankIndex == type.dictValue
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
                v-for="(type, index) in bankList"
                :key="index"
              >
                {{ type.dictLabel }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">贷款金额：</div>
          <div class="optionTitleDiv">
            <div class="allOptionDiv">
              <div
                @click="selectType(3, -1)"
                :class="
                  moneyIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'
                "
              >
                全部
              </div>
            </div>
            <div class="orderOptionDiv">
              <div
                @click="selectType(3, type.dictValue)"
                :class="
                  moneyIndex == type.dictValue
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
                v-for="(type, index) in moneyList"
                :key="index"
              >
                {{ type.dictLabel }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">贷款期限：</div>
          <div class="optionTitleDiv">
            <div class="allOptionDiv">
              <div
                @click="selectType(4, -1)"
                :class="
                  termIndex == -1 ? 'optionDiv optionDivSelected' : 'optionDiv'
                "
              >
                全部
              </div>
            </div>
            <div class="orderOptionDiv">
              <div
                @click="selectType(4, type.dictValue)"
                :class="
                  termIndex == type.dictValue
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
                v-for="(type, index) in termList"
                :key="index"
              >
                {{ type.dictLabel }}
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">担保方式：</div>
          <div class="optionTitleDiv">
            <div class="allOptionDiv">
              <div
                @click="selectType(5, -1)"
                :class="
                  guaranteeIndex == -1
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
              >
                全部
              </div>
            </div>
            <div class="orderOptionDiv">
              <div
                @click="selectType(5, type.dictValue)"
                :class="
                  guaranteeIndex == type.dictValue
                    ? 'optionDiv optionDivSelected'
                    : 'optionDiv'
                "
                v-for="(type, index) in guaranteeList"
                :key="index"
              >
                {{ type.dictLabel }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="productList">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="label">{{ getType(item.type) }}</div>
          <div class="content" @click="detailId(item)">
            <div class="titleBox">{{ item.productTitle }}</div>
            <div class="titleSun">
              {{ getObj(item.object) }}
            </div>
            <div class="textBox">
              <div class="textLeft">
                申请时间：<span>{{ item.applyStartTime }}</span>
              </div>
              <div class="textRight">
                发布时间：<span>{{ item.publishTime }}</span>
              </div>
            </div>
            <div class="textRig">
              <span>发布部门：{{ getPub(item.publishDepartment) }}</span>
              <span>浏览量：{{ item.views }}</span>
            </div>
          </div>
          <div class="btnBox" v-if="item.type != 6">
            <Buttons :buttons="buttons(item)" @jump="detailId(item)" class="btn" @none="''"></Buttons>
          </div>
        </div>
      </div>
      <div id="policyPagination" v-if="total > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          background
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getInventory } from "@/common/api/finance"

import Breadcrumb from "@/components/breadcrumb";
export default {
  data() {
    return {
      name: "finance",
      loading: false,
      crumbs: [
        {
          label: "金融服务",
          value: "finance",
        },
        {
          label: "金融产品清单",
          value: "financeProduct",
          choose: true,
        },
      ],
      typeList: [],
      bankList: [],
      moneyList: [],
      termList: [],
      guaranteeList: [],
      objList: [],
      pubList: [],
      typeIndex: -1,
      bankIndex: -1,
      moneyIndex: -1,
      termIndex: -1,
      guaranteeIndex: -1,
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      minHeight: 0
    };
  },
  components: {
    Breadcrumb,
  },
  computed: {
    buttons(){
      return function(item) {
        if (item.applyStateId == 3) {
          return [{text:"申请已结束",type:"gray",size:"l",method:"none"}]
        } else if (item.isApply == 2) {
          return [{text:"已申请",type:"gray",size:"l",method:"none"}]
        } else if (item.applyStateId == 1) {
          return [{text:"未开始",type:"gray",size:"l",method:"none"}]
        } else {
          return [{text:"立即申请",type:"success",size:"l",method:"jump"}]
        }
      }
    },
    getType() {
      return function (data) {
        if (this.typeList.length) {
          let obj = this.typeList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    getObj() {
      return function (data) {
        if (this.objList.length) {
          let obj = this.objList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    getPub() {
      return function (data) {
        if (this.pubList.length) {
          let obj = this.pubList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
  },
  async activated() {
    if (this.$route.query.type) {
      this.typeIndex = this.$route.query.type;
      this.$router.push({ query: {} });
    } else {
      this.typeIndex = -1
    }
    // 字典查询
    await this.gettypeList();
    // 金融产品清单列表
    await this.getDetailedPage();
  },
  methods: {
    /**
     * 选择政策类别事件
     * @param type 被选中的政策类别对象
     * @param index 被选中的政策类别下标
     */
    selectType(type, index) {
      if (type == 1) {
        this.typeIndex = index;
      } else if (type == 2) {
        this.bankIndex = index;
      } else if (type == 3) {
        this.moneyIndex = index;
      } else if (type == 4) {
        this.termIndex = index;
      } else if (type == 5) {
        this.guaranteeIndex = index;
      }

      this.getDetailedPage();
    },
    // 字典查询 政策类别
    async gettypeList() {
      let api = `finance_product_type,finance_product_bank,finance_product_amount,finance_product_term,finance_guarantee_way,finance_product_object,finance_publish_department`;
        // 调用公共方法中的查询字典表
        this.getDictList(this,api).then(res => {
          // console.log('aassssss', res)
          //  金融产品类型
          this.typeList = res.finance_product_type;
          //  贷款银行
          this.bankList = res.finance_product_bank;
          //  贷款金额
          this.moneyList = res.finance_product_amount;
          //  贷款期限
          this.termList = res.finance_product_term;
          //  担保方式
          this.guaranteeList = res.finance_guarantee_way;
          // 适用对象
          this.objList = res.finance_product_object;
          // 发布部门
          this.pubList = res.finance_publish_department;
          localStorage.setItem(
            "bankList",
            JSON.stringify(res.finance_product_bank) || "[]"
          );
          localStorage.setItem(
            "typeList",
            JSON.stringify(res.finance_product_type) || "[]"
          );
          localStorage.setItem(
            "objList",
            JSON.stringify(res.finance_product_object) || "[]"
          );
          localStorage.setItem(
            "moneyList",
            JSON.stringify(res.finance_product_amount) || "[]"
          );
          // 发布部门
          localStorage.setItem(
            "departmentList",
            JSON.stringify(res.finance_publish_department) || "[]"
          );
        })

      
    },
    // 金融产品清单列表
    async getDetailedPage() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.typeIndex == -1 ? "" : this.typeIndex,
        bank: this.bankIndex == -1 ? "" : this.bankIndex,
        amount: this.moneyIndex == -1 ? "" : this.moneyIndex,
        term: this.termIndex == -1 ? "" : this.termIndex,
        guaranteeWay: this.guaranteeIndex == -1 ? "" : this.guaranteeIndex,
      };
      this.loading = true
      let { code, msg, rows, total } = await getInventory(param)
      this.loading = false
      if (code != '200') return this.$message.warning(msg)
      this.total = total;
      this.list = rows;
    
      // 10-19改,使得按发布时间倒序排序
      // res.rows.sort(function (a, b) {
      //   return new Date(b.publishTime).getTime() - new Date(a.publishTime).getTime() ;
      // })
      
    },
    /**
     * 改变页面大小事件
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getDetailedPage();
    },
    /**
     * 换页事件
     */
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getDetailedPage();
    },
    // 跳转到详情页
    detailId(e) {
      let productId = e.productId;
      this.$router.push({
        path: "financeProductDetail",
        query: {
          productId,
        },
      });
    },
    // 跳转金融产品申请页
    LoansApply(e) {
      let productId = e.productId;
      this.$router.push({
        path: "/finance/financialLoansApply",
        query: {
          productId,
        },
      });
    },
  },
};
</script>
<style scoped>
/* .layout{
  height: 100vh;
  padding-bottom: 170px;
} */
.financeProduct {
  width: 1200px;
  margin: 0 auto;
}
.breadcrumb {
  width: 1200px;
  margin: 20px 0;
}
.productBox {
  min-height: 254px;
  border: 1px solid #eeeeee;
  border-bottom: none;
}
.productBox .item {
  border-bottom: 1px solid #eeeeee;
  position: relative;
}
.productBox .item .title {
  width: 168px;
  background: #f1f1f1;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.productBox .item .optionTitleDiv {
  width: 790px;
  margin-left: 188px;
  display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.productBox .item .optionTitleDiv .allOptionDiv {
  margin-left: 20px;
}
.productBox .item .optionTitleDiv .optionDiv {
  padding: 3px 8px;
  margin: 12px 10px;
  border-radius: 2px;
}
.productBox .item .optionTitleDiv .optionDiv:hover {
  cursor: pointer;
  transition: all 0.2s ease 0s;
}

.productBox .item .optionTitleDiv .optionDivSelected {
  color: #ffffff;
  background-color: #ce0000;
}
.productBox .item .optionTitleDiv .orderOptionDiv {
  display: flex;
}
.productList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
  min-height: 20vh;
}
.productList .item {
  width: 586px;
  height: 268px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
}
.productList .item .label {
  width: 112px;
  height: 32px;
  background: rgba(0, 174, 140, 0.1);
  margin-top: 20px;
  color: #00ae8c;
  line-height: 32px;
}
.productList .item .content {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  text-align: left;
  cursor: pointer;
}
.productList .item .content .titleBox {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  white-space:nowrap;
  text-overflow:hidden;
  text-overflow:ellipsis;
  overflow: hidden;
}
.productList .item .content .titleSun {
  font-size: 14px;
  color: #999;
}
.productList .item .content .textBox {
  display: flex;
  color: #999;
  font-size: 14px;
  margin-top: 20px;
}
.productList .item .content .textBox span {
  font-size: 13px;
}
.productList .item .content .textBox .textLeft {
  margin-right: 20px;
}
.productList .item .content .textRig {
  color: #999;
  font-size: 14px;
  margin-top: 10px;
}
.productList .item .content .textRig span:last-child {
  margin-left: 20px;
}
.productList .item .btnBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  border-top: 1px solid #eeeeee;
  align-items: center;
}
.productList .item .btnBox .btn {
  margin-top: 10px;
  margin-right: 20px;
}
.productList .item .btnBox .grey {
  background: #f1f2f4;
  color: #999;
}
#policyPagination {
  text-align: right;
  margin-bottom: 30px;
}
</style>